<template>
  <el-form :model="formData" size="normal">
    <el-form-item style="margin-bottom: 10px;">
      <el-input placeholder="请输入手机号" autocomplete="off" v-model="formData.username" clearable></el-input>
    </el-form-item>
    <el-form-item style="margin-bottom: 10px;">
      <el-input style="width: 215px;" autocomplete="off" placeholder="请输入图形验证码" v-model="formData.captcha"></el-input>
      <img class="code-img" @click="getCapCode()" :src="codeurl" alt="">
    </el-form-item>
    <el-form-item style="margin-bottom: 10px;">
      <el-input style="width: 215px;" autocomplete="off" placeholder="请输入手机验证码" v-model="formData.code"></el-input>
      <el-button @click="getCode()" :disabled="time > 0" style="width: 110px;margin-left: 10px;background: #3a58f1; border: none;" type="primary">{{time ? (time + 's') : '获取验证码'}}</el-button>
    </el-form-item>
    <el-form-item style="margin-bottom: 10px;">
      <el-input placeholder="请输入密码" autocomplete="off" v-model="formData.password" show-password></el-input>
    </el-form-item>
    <el-form-item style="margin-bottom: 10px;">
      <el-input @keyup.enter.native="doSubmit()" autocomplete="off" placeholder="请确认密码" v-model="formData.confirmPassword" show-password></el-input>
    </el-form-item>
    <div class="link">
      <span></span>
      <el-button type="text" @click="activeName('login')">返回登录</el-button>
    </div>
    <div>
      <el-button size="normal" type="primary" @click="doSubmit()" style="background: #3a58f1; border: none;" round>修改</el-button>
    </div>
  </el-form>
</template>
<script>
export default {
  name: 'login-component',
  data() {
    return {
      formData: {
        username: '',
        password: '',
        code: '',
        confirmPassword: '',
        captcha: undefined
      },
      cap_token: '',
      codeurl: '',
      time: 0,
      timer: null
    }
  },
  methods: {
    doSubmit() {
      if (this.$route.params.role === 'personal') {
        this.$http.post('/personal/session/activating', {
          phone: this.formData.username,
          code: this.formData.code,
          password: this.formData.password,
          confirm_password: this.formData.confirmPassword
        }).then(res => {
          if (res.status === 1) {
            this.$message({
              message: '重置成功！',
              type: 'success',
              center: true
            });
            this.activeName('login')
          }else{
            this.getCapCode()
            console.log(res.message)
          }
        })
      } else if (this.$route.params.role === 'company') {
        this.$http.post('/company/activating', {
          phone: this.formData.username,
          code: this.formData.code,
          user_pass: this.formData.password,
          confirm_user_pass: this.formData.confirmPassword
        }).then(res => {
          if (res.status === 1) {
            this.$message({
              message: '重置成功！',
              type: 'success',
              center: true
            });
            this.activeName('login')
          }else{
            this.getCapCode()
            console.log(res.message)
          }
        })
      }
    },
    activeName(name) {
      this.$emit('active', name)
    },
    getCode() {
      let url = '/company/sendsms'
      if (this.$route.params.role === 'company') {
        url = '/company/sendsms'
      } else {
        url = '/personal/session/sendsms'
      }
      this.$http.post(url, {
        phone: this.formData.username,
        captcha: this.formData.captcha,
        cap_token: this.cap_token,
        send_type: 1
      }).then(res => {
        if (res.status === 1) {
          this.$message.success('发送成功')
          this.time = res.data.expired || 60
          this.timer = setInterval(() => {
            this.time -= 1
            if (this.time <= 0) {
              clearInterval(this.timer)
              this.timer = null
              this.time = 0
            }
          }, 1000)
        } else {
          this.getCapCode()
        }
      })
    },
    getCapCode() {
      this.$http.get('/personal/session/captcha').then(res => {
        if (res.status === 1) {
          this.cap_token = res.data.token
          this.codeurl = res.data.file
        }
      })
    }
  },
  mounted() {
    this.getCapCode()
  }
}
</script>
<style lang="less" scoped>

.elRadioBox {
  width: 100%;
  height: 40px;
  margin-top: 14px;
}
.el-radio {
  color: #fff;
}
.el-input {
  width: 340px;
  max-width: 100%;
  margin-bottom: 14px;
}
.el-button {
  width: 340px;
  max-width: 100%;
}
.link {
  display: flex;
  justify-content: space-between;
  .el-button {
    width: auto;
    text-decoration: underline;
    color: #fff;
  }
}
.code-img {
  display: inline-block;
  width: 110px;
  height: 40px;
  margin-left: 10px;
  vertical-align: top;
}
</style>